<template>
	<view class="wrap">
		<van-notice-bar :scrollable="false" left-icon="volume-o" color="#1989fa" background="#ecf9ff"
			@click="onClickNotice">
			点这里地图导航查看批发部位置，或者联系我们！
		</van-notice-bar>
		<!-- 			@showSelectPicker="showSelectPicker" -->
		<goods-category
			id="goods-category"
			custom-class="goods-category-class"
			:category="categoryList"
			@changeCategory="changeCategory"
		/>
		<van-submit-bar
			:price="countPrice * 100"
			button-text="查看"
			@submit="onClickSee"
		>
		<van-goods-action-icon icon="chat-o" text="查看" :info="computedOrderLength" @click="onClickSee" />
		</van-submit-bar>
		<!-- <van-goods-action>
			<van-goods-action-icon icon="chat-o" text="内容" :info="computedOrderLength" @click="onClickSee" />
			<van-goods-action-button text="查看" @click="onClickSee" />
			<van-goods-action-button text="导出" @click="onExport" />
		</van-goods-action> -->

		<!-- 抽屉 -->
		<van-popup :show="show" position="bottom" custom-style="height: 85%" @close="onClosePopup">
			<view class="popup-view">
				<view class="popup-cart" v-if="computedOrderLength">
					<view class="cart-left">
						<view class="">
							订单（共{{ computedOrderLength }}种商品）
						</view>
					</view>
					<view class="cart-right" @click="onClickClear">
						<van-icon name="delete-o" size="14px" style="margin-right: 3px;" />清空
					</view>
				</view>
				<view class="popup-cont">
					<view class="product-container">
						<view class="product-list">
							<view class="product-item" v-for="(item, index) in order" :key="index">
								<view class="product-item-wrap">
									<icon :type="item.select" size="19" :data-index="index"
										:data-select="item.select" @click="change" color="red" />
									<view class="product_img">
										<image :src="item.thumbnail" class='goods-img'></image>
									</view>
									<view class="product-movable-item">
										<view class="goods-name">{{item.allName + item.extraName}}</view>
										<view class="goods-type">
											{{ item.gg }}
											<text>{{item.style}}</text>
										</view>
										<view class="goods-price">￥{{computedPrice(item)}}</view>
									</view>

									<view v-if="item.btnType === 'group'" class="product-movable-item product-movable-item-amount">
										<view class="num-box">
											<view class="btn-groups">
												<button class="goods-btn btn-minus" :data-item="item"
													:data-index="index" :data-num="item.num"
													@click="subtraction">—</button>
												<input class='num' type='number' :data-item="item"
													:data-index="index" @blur="numIputBlur" @focus="numIputFocus"
													@input='inputNum' :value='item.num'></input>
												<button class="goods-btn btn-add" :data-item="item"
													:data-index="index" :data-num="item.num"
													@click="addtion">+</button>
											</view>
										</view>
									</view>
									<!-- 如果是按钮类型-->
									<view v-else class="product-movable-item product-movable-item-amount">
										<van-button class="select-btn"
											@click="openChildSelect(item)"
											plain type="primary" size="mini"
										>
											选规格
											<text v-if="item.num" class="btn-num">({{item.num}})</text>
										</van-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="cart-fixbar">
					<view class="allSelect">
						<icon :type="allSelect" size="19" :data-select="allSelect" @click="allSelectClick"
							color='#fff' />
						<view class="allSelect-text">全选</view>
					</view>
					<view class="countNum">
						<text>共：</text>{{ computedOrderLength }}种
					</view>
					<view class="count">
						<text>合计：</text>
						￥{{countPrice}}
					</view>

					<view class="export" @click="showFile = true">
						<view class="orders">导出</view>
					</view>
				</view>
			</view>
		</van-popup>

		<van-popup :show="showNotice" position="bottom" custom-style="height: 35%" @close="onCloseNotice">
			<view class="popup-view">
				<!-- 内容 -->
				<view class="popup-cont" style="margin-top: 20px">
					<van-cell-group>
						<van-field readonly value="门店营业时间 07:30-13:00" :border="false">
							<van-icon slot="left-icon" size="18px" name="clock-o" class="custom-icon" />
						</van-field>
						<van-field readonly value="13834361709（点击拨号）" @click-input="onOpenPhone" :border="false">
							<van-icon @click="onOpenPhone" slot="left-icon" size="18px" name="phone-o"
								class="custom-icon" />
						</van-field>
						<van-field readonly value="交城县国斌食品批发（点击打开地图导航）" @click-input="onOpenLocation"
						:border="false">
							<van-icon @click="onOpenLocation" slot="left-icon" size="18px" name="location-o"
								class="custom-icon" />
						</van-field>
					</van-cell-group>
				</view>
			</view>
		</van-popup>

		<van-popup :show="showFile" position="bottom" custom-style="height: 25%" @close="showFile = false">
			<view class="popup-view">
				<view class="popup-cont" style="margin-top: 20px">
					<van-cell-group>
						<van-field :value="fileName" label="导出文件名" placeholder="请输入导出文件名" @change="onChangeFileName"/>
					</van-cell-group>
				</view>
				<!-- 底部按钮 -->
				<view class="cart-fixbar">
					<view class="export" @click="onExport">
						<view class="orders">导出</view>
					</view>
				</view>
			</view>
		</van-popup>

		<van-toast id="van-toast" />
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import Toast from '../../wxcomponents/@vant/weapp/toast/toast.js';
	import Dialog from '../../wxcomponents/@vant/weapp/dialog/dialog';
	import { getCategoryList } from '../../services/fetchCategoryList.js';
	import { downloadExl } from '../../utils/utils.js';
	// import { downloadExl } from '../../utils/pop.js';
	export default {
		data() {
			return {
				categoryList: getCategoryList(), // 所有数据
				order: [], // 选择的订单信息
				show: false, // 抽屉
				showNotice: false,
				showFile: false, // 导出文件名抽屉
				fileName: '',
				goodsNum: '',
				allSelect: "success", // 是否全选
				countNums: 0, // 总计多少个
				countPrice: 0, // 总计多少钱
			}
		},
		computed: {
			computedOrderLength() {
				return this.order.length
			}
		},
		methods: {
			onChangeFileName(event) {
				this.setData({
					fileName: event.detail
				});
			},
			computedPrice(item) {
				var price = (item.price * (item.num || 1)).toFixed(2)
				var handlePrice = parseFloat(price)
				return handlePrice
			},
			openChildSelect(item){
				// console.log(item);
				this.selectComponent('#goods-category').chooseCategoryByParent(item);
			},
			onExport() {
				if (!this.fileName){
					Toast('请输入导出文件名')
					return;
				}
				const jsonData = this.order.map((i, index) => {
					return {
						'序号': index + 1,
						'点货': '',
						'已配': '',
						'货品': i.allName + i.extraName,
						//'条形码': i.txm || '',
						'规格': i.gg || '',
						'数量': i.num,
						'单价': i.price || '',
						'总价': i.num * i.price
					}
				})
				downloadExl(jsonData, {
					fileName: this.fileName,
					countPrice: this.countPrice,
				})
			},
			async onClickSee() {
				// const res = await wx.cloud.callContainer({
				// 	"config": {
				// 		"env": "prod-3gxytjwid2c26af2"
				// 	},
				// 	"path": "/demo/api/selectUserInfo",
				// 	"header": {
				// 		"X-WX-SERVICE": "springboot-3cni",
				// 		"content-type": "application/json"
				// 	},
				// 	"method": "POST",
				// 	"data": ""
				// });
				// console.log('res', res);
				this.setData({ show: true });
				//console.log(this.order);
			},
			onClickCopy() {
				const textArr = this.order.map(i => i.allName + i.num + i.defaultUnit);
				const text = textArr.join('，')
				console.log(text);
				wx.setClipboardData({ //复制文本
					data: text,
					success: () => {
						wx.showToast({
							title: '复制成功',
							icon: "none",
							mask: "true" //是否设置点击蒙版，防止点击穿透
						})
						this.setData({
							show: false
						});
					}
				})
			},
			onClickClear() {
				Dialog.confirm({
					message: '您确定清空吗？',
				}).then(() => {
					this.order = [];
					this.categoryList = getCategoryList() // 所有数据
					this.reCount()
				}).catch(() => {
					// on cancel
				});
			},
			// 滑动单元格
			onCloseSwiper(event) {
				console.log(event);
				const { position, instance } = event.detail;
				const {
					item
				} = event.currentTarget.dataset;
				// 过滤掉名称相同的
				const newOrder = this.order.filter(i => item.allName !== i.allName);
				switch (position) {
					case 'right':
						this.order = newOrder
						instance.close();
						break;
				}
			},
			onClosePopup() {
				this.show = false;
			},
			onClickNotice() {
				this.showNotice = true
			},
			onCloseNotice() {
				this.showNotice = false
			},
			onOpenLocation() {
				wx.openLocation({ //​使用微信内置地图查看位置。
					latitude: 37.530592, //要去的纬度-地址
					longitude: 112.153615, //要去的经度-地址
					name: "交城国兵食品批发",
					address: '交城国兵食品批发'
				})
			},
			onOpenPhone() {
				wx.makePhoneCall({
					phoneNumber: "13834361709", //这里是电话号码[假的]可以调用自己的数据this.xxx
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},

			getNewCategoryList({
				num,
				activeKey,
				index,
				subindex,
				children,
				extraName,
				remark
			}) {
				// console.log('nnn', num);
				let newCategoryList = [...this.categoryList]
				const smallCategory = newCategoryList[activeKey].children[index];
				const subArr = smallCategory.children; // 小分类数组
				subArr[subindex].num = num;
				// 如果是按钮类型，要更新children
				if (children){
					subArr[subindex].children = children;
					subArr[subindex].extraName = extraName;
					subArr[subindex].remark = remark;
				}
				return {
					subArr,
					newCategoryList
				}
			},
			// 子组件改变时，更新总数据，计算金额
			changeCategory(event) {
				const {
					num,
					subindex
				} = event.detail; // 确认后传入的订单
				const {
					subArr,
					newCategoryList
				} = this.getNewCategoryList(event.detail)
				// console.log(newCategoryList);
				// 先拿到除了新修改的订单外的其他订单
				let newOrder = this.order.filter(i => i.allName !== subArr[subindex].allName);
				// 如果新订单个数不为0，就追加进来
				if (num > 0) {
					newOrder = [...newOrder, subArr[subindex]]
				}
				newOrder.forEach(item => {
					item.select = 'success'; // 默认选中
				});
				this.order = newOrder
				this.categoryList = newCategoryList
				this.reCount()
			},

			// 勾选或取消勾选抽屉内容 
			change(event) {
				const {
					index,
					select
				} = event.currentTarget.dataset
				if (select == "circle") {
					var stype = "success"
				} else {
					var stype = "circle"
				}
				let newList = this.order
				newList[index].select = stype
				this.setData({
					order: newList
				})
				this.reCount()
			},

			addtion(event) {
				const {
					item,
					index
				} = event.currentTarget.dataset
				let num = event.currentTarget.dataset.num;
				//1.计算出加后的值
				if (num < 99) num++
				//2.根据num更新order
				let newList = this.order
				newList[index].num = num
				//3.根据num更新categoryList
				// this.setDataAndCount(detail, )
				const detail = { ...item, num };
				console.log(num, 'num');
				const {
					newCategoryList
				} = this.getNewCategoryList(detail)
				this.setData({
					categoryList: newCategoryList,
					order: newList,
					goodsNum: num,
				})
				this.reCount()
			},
			//减法
			subtraction(event) {
				const {
					item,
					index
				} = event.currentTarget.dataset
				let num = event.currentTarget.dataset.num;
				let newList = this.order
				if (num == 1) { //当数量为1件时，再次点击移除该商品
					num = 0
					newList.splice(index, 1)
				} else {
					num--
					newList[index].num = num
				}

				const detail = { ...item, num }
				const {
					newCategoryList
				} = this.getNewCategoryList(detail)
				this.setData({
					categoryList: newCategoryList,
					order: newList,
					goodsNum: num,
				})
				this.reCount()
			},
			numIputBlur(event) {
				const {
					item,
					index
				} = event.currentTarget.dataset
				let num = this.goodsNum
				let newList = this.order
				if (num == '') {
					num = 1
				} else if (num < 1) {
					num = 1
				} else if (num > 99) {
					num = 1
				}
				console.log('失焦时', num);
				newList[index].num = num;
				const detail = {
					...item,
					num
				}
				const {
					newCategoryList
				} = this.getNewCategoryList(detail)
				this.setData({
					categoryList: newCategoryList,
					order: newList,
				})
				this.reCount()
			},
			//全选
			allSelectClick(e) {
				var allSelect = e.currentTarget.dataset.select //先判断是否选中
				var newList = this.order
				// console.log(newList)
				if (allSelect == "circle") {
					for (var i = 0; i < newList.length; i++) {
						newList[i].select = "success"
					}
					var select = "success"
				} else {
					for (var i = 0; i < newList.length; i++) {
						newList[i].select = "circle"
					}
					var select = "circle"
				}
				this.setData({
					order: newList,
					allSelect: select
				})
				this.reCount()
			},
			// 当用户输入时，存储输入的数字
			inputNum(event) {
				// console.log(event.detail.value);
				this.setData({
					goodsNum: event.detail.value //
				})
			},
			// 当用户聚焦时，存储输入的数字
			numIputFocus(event) {
				console.log('聚焦', event.detail.value);
				this.setData({
					goodsNum: event.detail.value //
				})
			},

			reCount() {
				this.countNum()
				this.count()
			},
			countNum() { //计算数量
				var newList = this.order
				var allNum = 0
				for (var i = 0; i < newList.length; i++) {
					if (newList[i].select == "success") {
						allNum += parseInt(newList[i].num)
					}
				}
				this.countNums = allNum
			},
			count() { //计算金额方法
				var newList = this.order
				var newCount = 0
				for (var i = 0; i < newList.length; i++) {
					if (newList[i].select == "success") {
						newCount += this.computedPrice(newList[i])
					}
				}
				this.setData({
					countPrice: newCount
				})
			},

			setData: function(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
						data = data[key2];
					})
				});
			}
		},
		mounted(){
			wx.cloud.init()
		},
		onShow(){
			// setTimeout(() => {
			// 	var query = wx.createSelectorQuery();
			// 	query.select('.tableft').boundingClientRect();
			// 	query.exec(function (res) {
			// 		//res就是 所有标签为v1的元素的信息 的数组
			// 		console.log(res);  
			// 	})
			// }, 500)
				// console.log('xxxx', XlsxPopulate);
		},
	}
</script>

<style>
	/* vant样式修改 */
	.van-notice-bar,
	.van-notice-bar__left-icon {
		font-size: 11px !important;
		height: 34px !important;
	}

	.van-swipe-cell__left,
	.van-swipe-cell__right {
		display: inline-block;
		width: 65px;
		height: 34px;
		font-size: 12px;
		line-height: 34px;
		color: #fff;
		text-align: center;
		background-color: #f44;
	}
	.van-field__control { font-size: 14px; }
	.van-field__body { height: 30px; }
	.van-card { background-color: white !important; }
	.van-card__bottom {
		display: flex;
		justify-content: space-between;
		/* line-height: 24px !important; */
		height: 24px;
	}
	.van-tabs__wrap {
		height: 30px !important;
		display: flex;
		align-items: center;
	}
	.van-tab {
		text-align: center;
		background: #e6e6e65c;
		font-size: 24rpx!important;
		padding: 0 !important;
		/* 使得每个tab的宽度由内容撑起 */
		flex: auto!important;
		min-width: 60px!important;
		max-width: 70px!important;
		margin-right: 8px !important;
	}
	.van-tab--active {
		background: #fff2c5;
	}
	.van-grid-item__content{
		padding: 2px !important;
	}

	.wrap {
		height: 100vh;
		overflow: hidden;
	}

	.goods-category-class {
		background-color: #f6f6f6 !important;
		/* 内容高度等于总高度减去通知和底部按钮高度 */
		height: calc(100% - 34px - 50px);
	}

	.goods-category-class .goods-category-normal-item-container-item {
		margin-top: 20rpx;
	}

	page {
		min-height: none;
		padding-bottom: 0;
	}

	.popup-view {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.popup-cont {
		height: calc(100% - 70px);
		overflow-y: scroll;
	}

	.popup-cart {
		display: flex;
		justify-content: space-between;
	}
	.cart-left {
		display: flex;
    align-items: center;
    margin-left: 10px;
		font-size: 12px;
		color: #999999;
	}
	.cart-right {
		text-align: right;
		padding: 5px 12px;
		font-size: 12px;
		color: #999999;
	}

	.popup-btn {
		height: 40px;
	}

	.custom-icon {
		margin: 0 12px;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
		margin-left: 20rpx;
	}

	.cart-box .item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		border-top: 8rpx solid #f0f3fa;
	}

	.cart-box .item .goods-info {
		margin-left: 20rpx;
	}

	.cart-box .row {
		color: #fff;
		display: flex;
		flex-direction: row;
		width: 430rpx;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	.select-btn button{
		color: #fff !important;
		border: none !important;
		background: #e60a30 !important;
		width: 60px;
		border-radius: 5px;
	}
	.goods-name {
		font-size: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/* white-space: nowrap; */
		color: #333;
		padding-bottom: 10rpx;
		width: 460rpx;
	}

	.goods-price {
		font-size: 32rpx;
		color: #e02e24;
		position: relative;
		top: 14rpx;
	}

	.goods-type {
		color: #999;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 240rpx;
		padding-bottom: 10rpx;
	}

	.num-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		position: relative;
		top: 6rpx;
	}

	.goods-btn {
		width: 44rpx;
		height: 44rpx;
		padding: 0;
		line-height: 40rpx;
		font-weight: 400;
		color: #fff;
		margin: 0;
		background: #e60a30;
		border-radius: 50%;
	}

	.num {
		color: #999;
		width: 50rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 30rpx;
	}

	.btn-add {
		font-size: 36rpx;
	}

	.btn-minus {
		font-size: 18rpx;
		background: #f8babb;
	}

	.btn-groups {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		background: #f4f4f4;
		padding: 2rpx;
		border-radius: 10rpx;
	}

	.cart-fixbar {
		height: 45px;
		background: #e60a30;
		height: 106rpx;
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.cart-box .item:last-child {
		border-bottom: 8rpx solid #f0f3fa;
	}

	.cart-fixbar .allSelect {
		display: flex;
		flex-direction: row;
		height: 106rpx;
		align-items: center;
		color: #fff;
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.cart-fixbar .allSelect-text {
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	.cart-fixbar .count {
		right: 240rpx;
		color: #fff;
		font-size: 36rpx;
		position: absolute;
		display: flex;
		align-items: center;
	}

	.cart-fixbar .countNum {
		right: 450rpx;
		color: #fff;
		font-size: 36rpx;
		position: absolute;
		display: flex;
		align-items: center;
	}

	.cart-fixbar .count text,
	.cart-fixbar .countNum text {
		font-size: 28rpx;
	}

	.cart-fixbar .export {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 68rpx;
		width: 160rpx;
		color: #e02e24;
		background: #fff;
		position: absolute;
		right: 5rpx;
		margin: 0 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
	}

	.cart-fixbar .copy {
		right: 120rpx;
		color: #e02e24;
		height: 58rpx;
		background: #fff;
		line-height: 58rpx;
		position: absolute;
		margin: 0 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
	}

	.cart-fixbar .orders {
		padding: 0 18rpx;
	}

	.cart-fixbar .allnum {
		font-size: 28rpx;
	}

	.row_boxs {
		display: flex;
		align-items: center;
	}

	.goods-type {
		flex: 1;
	}

	.goods-type text {
		padding-right: 10rpx;
	}

	.section {
		padding-bottom: 220rpx;
	}

	.footer {
		border-top: 1rpx solid #eee;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background: #fff;
		font-size: 24rpx;
		height: 55px;
		align-items: center;
	}

	.footer .ft_item {
		width: 25%;
		text-align: center;
	}

	.footer .ft_item image {
		width: 44rpx;
		height: 44rpx;
		margin-top: 10rpx;
	}

	.footer .ft_item:nth-child(3) .item_title {
		color: #e60a30;
	}

	.section_img {
		width: 110rpx;
		height: 110rpx;
	}

	.section_boxs {
		text-align: center;
		margin: 50% auto 0;
	}

	.cart-box_p,
	.section_p {
		text-align: center;
		font-size: 26rpx;
		padding-top: 10rpx;
		color: #999;
	}

	.cart-box_p {
		padding-top: 60rpx;
	}

	.cart-box_p text {
		border: 1rpx solid #eee;
		padding: 10rpx 24rpx;
		letter-spacing: 1rpx;
	}

	.title {
		margin: 60rpx 0 30rpx;
		font-size: 40rpx;
		text-align: center;
		font-weight: bold;
		color: #383a3d;
	}

	.product-list .product-item {
		position: relative;
		width: 100vw;
		border-bottom: 10rpx solid #f0f3fa;
		box-sizing: border-box;
		background: #fff;
		z-index: 999;
	}

	.slide-product-list .slide-product-item {
		position: relative;
		width: 100vw;
		border-bottom: 2rpx solid #e9e9e9;
		box-sizing: border-box;
		background: #fff;
		z-index: 999;
	}

	.product-list .product-item movable-area {
		height: 120rpx;
		width: calc(100vw - 120rpx);
	}

	.product-list .product-item movable-view {
		height: 120rpx;
		width: 100vw;
		background: #fff;
		z-index: 999;
	}

	.product-list .product-item:first-child {
		border-top: 10rpx solid #f0f3fa;
	}

	.product-list .product-item .delete-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 120rpx;
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #fff;
		line-height: 120rpx;
		z-index: 1;
		background: #e66671;
		text-align: center;
	}

	.product-list .product-item-wrap {
		position: relative;
		display: flex;
		align-items: center;
		padding: 8rpx 0 20rpx 20rpx;
		box-sizing: border-box;
	}

	.product-list .product-item-wrap .product-movable-item {
		flex: 1;
	}

	.product-list .product-item-wrap .product-movable-item-name {
		font-size: 28rpx;
		color: #71747a;
		line-height: 60rpx;
		margin-right: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.product-list .product-item-wrap .product-movable-item-code {
		font-size: 24rpx;
		color: #969aa3;
	}

	.product-list .product-item-wrap .product-movable-item-amount {
		flex: 1;
		position: relative;
		padding-right: 30rpx;
    position: absolute;
    right: 0;
    bottom: 5px;
	}

	.product-list .product-item-wrap .product-movable-item-amount .amount {
		width: 120rpx;
		font-size: 28rpx;
		color: #383a3d;
		line-height: 60rpx;
	}

	.product-list .product-item-wrap .product-movable-item-amount .unit {
		position: absolute;
		top: 0;
		right: 30rpx;
		font-size: 28rpx;
		color: #969aa3;
		line-height: 60rpx;
	}

	.product_img {
		display: flex;
		align-items: center;
		padding-right: 20rpx;
	}

	.product-list {
		display: block;
		overflow-y: auto;
	}
</style>